<template>
  <view class="wrapper">
    <uni-grid :column="4" :show-border='false' :highlight="true" @change="change">
      <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
        <view class="grid-item-box" style="background-color: #fff;">
          <image class="img" :src='item.src'></image>
          <text class="text">{{item.text}}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            icon: 'calendar-filled',
            text: '请假申请',
            src: '../../static/index/leave.png',
            id: 2,
          }, {
            icon: 'calendar-filled',
            text: '加班申请',
            id: 3,
            src: '../../static/index/overtime.png'
          }, {
            icon: 'calendar-filled',
            text: '补卡申请',
            id: 1,
            src: '../../static/index/buka.png'
          }, {
            text: '我的评价',
            src: '../../static/profile/comment.png',
            path: '/pages/commit/commit'
          },
          {
            text: '请假列表',
            src: '../../static/index/qingjia.png',
            tab: '/pages/leaveList/leaveList'
          },
          {
            text: '加班列表',
            src: '../../static/index/jiaban.png',
            tab: '/pages/timeList/timeList'
          },
          {
            text: '补卡列表',
            src: '../../static/index/bukalist.png',
            path: '/pages/buka/buka'
          }
        ]
      };
    },
    methods: {
      change(e) {
        const i = e.detail.index
        const item = this.list[i]
        if (item.tab) {
          return uni.switchTab({
            url: item.tab
          })
        }
        if (item.path) {
          return uni.navigateTo({
            url: item.path
          })
        }
        uni.navigateTo({
          url: '/pages/Leave/Leave' + `?title=${item.text}&id=${item.id}`
        })
      }
    }
  }
</script>

<style>
  .wrapper {
    padding: 20rpx;
  }

  .grid-item-box {
    flex: 1;
    // position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .text {
    font-size: 14px;
    margin-top: 5px;
  }

  .img {
    width: 80rpx;
    height: 80rpx;
  }
</style>